<template>
  <div class="cartComment">
    <v-header
      class="Vheader"
      :opacity="opacity"
      :customBackground="customBackground"
      :headerBg="this.commentBanneListTopBgImg">

      <div class="search" slot="main" @click.stop="showSearch = true" :style="{marginTop: paddingTop + 'px'}">
        <div class="searchLeft">
          <img :src="searchIcon" alt="" style="paddingTop: 2px; width:16px; height: 16px;">&nbsp;&nbsp;
          <p style="color: #999">请输入关键字搜索</p>
        </div>
        <img @click.stop="toAI" :src="AIAvatar" width="20px" height="20px" style="margin-right: 9px; padding: 16px;"/>
      </div>

    </v-header>

    <div class="cartInnerHeight" ref="cartInnerHeight">

      <div>
        <slider :list="commentBanneList">
          <div v-for="item in commentBanneList" :key="item.id" style="height: 187px" @click="clickBanner(item)">
            <img v-lazy="item.thumbUrl" width="100%" height="100%">
          </div>
        </slider>

<!-- 商城入口 -->

      <div class="cartEntrance">
        <div class="cartEntranceItem"  @click="goToScenicSpot">
          <img :src="jingDianIcon" alt="">
          {{$t('tab.scenic')}}
        </div>

        <div class="cartEntranceItem" @click="goToHotel">
          <img :src="hotelIcon" alt="">
          {{$t('tab.hotel')}}
        </div>

        <div class="cartEntranceItem" @click="goToSpecialLocalProduct">
          <img :src="featureIcon" alt="">
          {{$t('tab.specialty')}}
        </div>

        <div class="cartEntranceItem" @click="goToFood">
          <img :src="foodIcon" alt="">
          {{$t('tab.food')}}
        </div>

        <div class="cartEntranceItem" @click="goToAirplane">
          <img :src="airplaneIcon" alt="">
          {{$t('tab.airplane')}}
        </div>

        <div class="cartEntranceItem" @click="goToTrain">
          <img :src="trainIcon" alt="">
          {{$t('tab.train')}}
        </div>

        <div class="cartEntranceItem" @click="goToBus">
          <img :src="busIcon" alt="">
          {{$t('tab.bus')}}
        </div>

      </div>


<!-- 精选 -->
      <div class="carefulSelected">
        <span class="carefulSelectText">精选</span>
        <scroll :data="select" direction="horizontal" style="width: 100%;" eventPassthrough="vertical" class="horizontal-scroll">
          <div slot="content" class="scrollRecom" ref="scrollRecom">
            <div v-for="item in select" :key="item.id" @click.stop.prevent="commentClick(item.id, item.type)">
              <div class="scrollRecomItem">

                <img class="carefulSelectedThumbUrl" v-lazy='item.thumbUrl' alt="">
                <span class="carefulSelectedThumbIcon" style="color: #fff;">{{item.typeIcon}}</span>

                <div class="carefulSelectedContent" >
                  <div class="selectName">{{item.name}}</div>
                  <div class="addressCartAll">
                    <i class="fa fa-map-marker" aria-hidden="true" style="margin: 3px 3px 0 0;"></i>
                    <span class="addressCart">{{item.address}}</span>
                  </div>
                  <div class="priceCart">
                    <span class="priceCartPrice">
                      <span style="marginRight: -4px">￥</span>
                      <span class="priceCartText">{{item.price}}</span>
                      起
                    </span>
                    <span class="priceCartLevel">{{item.level}}分</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </scroll>
      </div>

<!-- 推荐、热销 -->
      <div class="vuxTab">
        <tab>
          <tab-item selected active-class="fontWei" @on-item-click="onItemClick">推荐</tab-item>
          <tab-item active-class="fontWei" @on-item-click="onItemClickRe">热销</tab-item>
        </tab>
      </div>

<!-- 推荐 -->
      <div class="productAll">
        <!-- 推荐 -->
        <div v-if="cartType===0" class="product-card" v-for="item in res" :key="item.id" @click="commentClick(item.id, item.type)">
          <div class="thumbUrl">
            <div class="main" v-lazy:backgroundImage="item.thumbUrl">
            <p class="price">
              ￥
              <span class="priceNum" >{{item.price}}</span>
              起
            </p>
            <span class="thumbIcon">{{item.typeIcon}}</span>
          </div>

          </div>
          <div class="bottom">
            <div class="line">

              <div class="main-wrapper">
                <div style="display:flex; justify-content:space-between;">
                  <div style="max-width: 100%">
                    <div class="cartCommentIcon">
                      <p class="name" style="max-width: 60%">{{item.name}}</p> &nbsp;&nbsp;&nbsp;
                      <div style="paddingBottom: 4px" class="cartCommentIconRater">
                        <rater v-if="item.type !== 2" v-model="item.level" :font-size="14" disabled active-color="#FFA004"></rater>
                        <span style="marginLeft: -2px; fontSize: 14px; color: #FFA004">{{item.level}}分</span>
                      </div>
                    </div>
                    <p class="feature" style="max-width: 98%">
                      {{item.intro}}
                    </p>
                  </div>
                </div>
              </div>

            </div>
            <div class="addressW">
              <p class="address">
                <i class="fa fa-map-marker" aria-hidden="true" style="margin-right: 3px;"></i>{{item.address}}
              </p>
            </div>
          </div>
        </div>

        <!-- 热销 -->
        <div v-if="cartType===1" class="product-card" v-for="item in data" :key="item.id" @click="commentClick(item.id, item.type)" >

          <div class="thumbUrl">
            <div class="main" v-lazy:backgroundImage="item.thumbUrl">
              <p class="price">
                ￥
                <span class="priceNum" >{{item.price}}</span>
                起
              </p>
              <span class="thumbIcon">{{item.typeIcon}}</span>
            </div>
          </div>

          <div class="bottom">
            <div class="line">

              <div class="main-wrapper">
                <div style="display:flex; justify-content:space-between;">
                  <div style="max-width: 100%">
                    <div class="cartCommentIcon">
                      <p class="name" style="max-width: 60%">{{item.name}}</p> &nbsp;&nbsp;&nbsp;
                      <rater v-if="item.type !== 2" v-model="item.level" :font-size="14" disabled active-color="#FFA004"></rater>
                      <span style="marginLeft: 2px; fontSize: 14px; color: #ff9c00">{{item.level}}分</span>
                    </div>
                    <p class="feature"  style="max-width: 98%">
                      {{item.intro}}
                    </p>
                  </div>
                </div>
              </div>

            </div>
            <div class="addressW">
              <p class="address">
                <i class="fa fa-map-marker" aria-hidden="true" style="margin-right: 3px;"></i>{{item.address}}
              </p>
            </div>
          </div>
        </div>

        <div :style="{height: marginBottom + 'px'}" style="background: none; width: 100%;"></div>
      </div>
    </div>


    </div>

<!-- 搜索 -->
    <global-search v-model="showSearch" type="address" :range="[0, 1, 2, 3]"></global-search>

    <router-view />
  </div>
</template>

<script type='text/ecmascript-6'>
import VHeader from '@/components/v-header/v-header'
import scroll from '@/components/scroll/scroll'
import Slider from '@/components/slider/slider'
import { Scroller, Tab, TabItem, Rater, Divider } from 'vux'
import icon from '@/assets/json/addressIcon.json'
import { mapGetters } from 'vuex'
import axios from '@/api/axiosApi'
import { isIphoneX } from '@/assets/js/brower'

import GlobalSearch from '@/components/global-search/global-search'

import jingDianIcon from '@/assets/img/icon/jingdian.png'
import hotelIcon from '@/assets/img/icon/jiudian.png'
import featureIcon from '@/assets/img/icon/techan.png'
import foodIcon from '@/assets/img/icon/meishi.png'
import airplaneIcon from '@/assets/img/icon/shop_entrance_airplane@3x.png'
import busIcon from '@/assets/img/icon/shop_entrance_bus@3x.png'
import trainIcon from '@/assets/img/icon/shop_entrance_train@3x.png'

import commentBanneListTopBgImg from '@/assets/img/cart_headerBg.png'

import searchIcon from '@/assets/img/cart_shop_icon_search@3x.png'
import AIAvatar from '@/assets/img/cart_shop_icon_robot@3x.png'
import posirionCart from '@/assets/img/shop_icon_location@3x.png'

// vue-awesome-swiper在全局没引入时，需要
import 'swiper/dist/css/swiper.css'
import {swiper, swiperSlide} from 'vue-awesome-swiper'

import nativeBridge from '@/assets/js/nativeBridge'
import { AIRPLANE_H5_URL, TRAIN_H5_URL, BUS_H5_URL } from '@/api/config'

export default {
  name: 'Cart',
  data () {
    return {
      cartType: 0,
      icon,
      jingDianIcon,
      hotelIcon,
      foodIcon,
      featureIcon,
      airplaneIcon,
      busIcon,
      trainIcon,
      data: [],
      res: [],
      select: [],
      commentBanneList: [],
      commentBanneListTopBgImg,
      customBackground: '#fff',
      marginBottom: 0,
      showSearch: false,
      opacity: 0,
      allPopupModels: ['showLasted', 'showSearch', 'showAtlas', 'showFutureUser', 'showUserList', 'showSelectAddress'],
      searchIcon,
      AIAvatar,
      posirionCart,
      swiperWidth: 0,
      statusBarColor: 'black'
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    },
    ...mapGetters([
      'currentArea'
    ])
  },
  components: {
    Slider,
    scroll,
    Scroller,
    Tab,
    TabItem,
    Rater,
    Divider,
    GlobalSearch,
    VHeader,
    swiper,
    swiperSlide
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      const scrollTop = vm.$store.getters.scrollTop
      if (vm.$refs.cartInnerHeight && scrollTop.Cart) {
        vm.$refs.cartInnerHeight.scrollTop = scrollTop.Cart
      }
    })
  },
  beforeRouteLeave (to, from, next) {
    this.$store.commit('SET_SCROLL_TOP', {Cart: this.$refs.cartInnerHeight.scrollTop})
    next()
  },
  created () {
    this.showSearch = false
    this.marginBottom = 20
    if (isIphoneX()) {
      this.marginBottom = 165
      this.paddingTop = 26
    } else {
      this.marginBottom = 120
      this.paddingTop = 26
    }
    this.choicenessCommodity()
  },
  mounted () {
    // this.$refs.cartInnerHeight.$el.style.height = (window.innerHeight - 45) + 'px'
    this.$refs.scrollRecom.style.width = (167 + 10) * 5 + 'px'
    this.hotSell()
    this.commentBanner()
  },
  methods: {
    onItemClick () {
      this.cartType = 0
    },
    onItemClickRe () {
      this.cartType = 1
    },
    hotSell () {
      axios.get(this, '/v1/hotSellCommodity/', {
        num: 10
      }, (data) => {
        data.forEach(item => {
          switch (item.type) {
            case 0:
              item.typeIcon = '酒店'
              break
            case 1:
              item.typeIcon = '景区'
              break
            case 2:
              item.typeIcon = '特产'
              break
            default:
              item.typeIcon = '其他'
              break
          }
        })
        this.data = data
      })
    },
    choicenessCommodity () {
      axios.get(this, '/v1/choicenessCommodity/', {
        num: 15
      }, (res) => {
        res.forEach(item => {
          switch (item.type) {
            case 0:
              item.typeIcon = '酒店'
              break
            case 1:
              item.typeIcon = '景区'
              break
            case 2:
              item.typeIcon = '特产'
              break
            default:
              item.typeIcon = '其他'
              break
          }
        })
        this.select = res.slice(0, 5)
        this.res = res.slice(5)
      })
    },
    clickBanner(banner) {
      if (banner.type === 0) {
        if (banner.contentId) {
          this.$router.push(`/content/${banner.contentId}/${banner.name}`)
        }
      } else {
        if (banner.linkId) {
          const tmp = banner.linkId.split(':')
          if (tmp.length === 2) {
            switch (tmp[0]) {
              case 'scenic':
                this.$router.push(`/cart/product/${tmp[1]}/1`)
                break
              case 'hotel':
                this.$router.push(`/cart/product/${tmp[1]}/0`)
                break
              case 'feature':
                this.$router.push(`/specialLocalProductDetail/${tmp[1]}`)
                break
              case 'food':
                this.$router.push(`/foodDescribe/${tmp[1]}`)
                break
              case 'strategy':
                this.$router.push('/address/playStrategy/' + tmp[1])
                break
            }
          }
        }
      }
    },
    commentClick (id, type) {
      if (type === 0 || type === 1) {
        this.$router.push(`/cart/product/${id}/${type}`)
      } else if (type === 2) {
        this.$router.push(`/specialLocalProductDetail/${id}`)
      }
    },
    commentBanner () {
      axios.get(this, '/v1/banner/5', null,
        (data) => {
          this.commentBanneList = data
        })
    },
    goToScenicSpot () {
      this.$router.push({
        path: '/productList/1',
        query: {
          addressInfoName: '凯里',
          addressInfoId: 'ba062c32fdf611e7ba2d00163e0c27f8'
        }
      })
    },
    goToHotel () {
      this.$router.push('/HotelQuery')
    },
    goToSpecialLocalProduct () {
      this.$router.push('/specialLocalProduct')
    },
    goToFood () {
      this.$router.push('/food')
    },
    // scroll (position, movingY) {
    //   // console.log(this.$refs.cartInnerHeight.scrollTop)
    //   if (position.y <= -230) {
    //     this.opacity = 0.9
    //   } else {
    //     this.opacity = Math.abs(position.y / 230)
    //   }
    // },
    toAI() {
      this.$router.push('/chatAI')
    },
    goToBus() {
      nativeBridge.openH5Page(BUS_H5_URL)
    },
    goToTrain() {
      nativeBridge.openH5Page(TRAIN_H5_URL)
    },
    goToAirplane() {
      nativeBridge.openH5Page(AIRPLANE_H5_URL)
    }
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/css/variable.styl'
  .search{
    position absolute
    // top 3%
    left 50%
    transform translate(-50%, -50%)
    display flex
    justify-content space-between
    align-items center
    color #fff
    border 1px solid rgba(255, 255, 255, 0.4)
    background #f5f5f5
    width 85%
    height 32px
    line-height 42px
    border-radius 30px
    padding 0 0px 0 18px
    font-size 16px
    .searchLeft{
      display flex
      align-items center
    }
  }
  .carefulSelectText {
    font-size $font-size-large
    font-weight bold
    color $color-text-1
    position relative
    padding 15px 15px
    display block
    // &:before {
    //   display: block;
    //   content: '';
    //   position: absolute;
    //   left: 0px;
    //   top: -2px;
    //   bottom: 0px;
    //   width: 5px;
    //   border-radius: 2.5px;
    //   height 24px
    //   background: $color-theme;
    // }
  }
  .cartComment{
    position fixed
    top 0
    right 0
    bottom 0
    left 0
    .header {
      display flex
      align-items center
      .header-seach {
        background:  rgba(205, 205, 205, 0.5);
        height: 30px;
        line-height: 30px;
        font-size: 15px;
        width: 100%;
        border-radius: 5px;
      }
      .right {
        line-height: 1;
        i {
          font-size: 27px;
        }
      }
    }
    .carefulSelected{
      background #fff
      margin 10px 0
      position relative
      // width 100%
      // -webkit-overflow-scrolling: touch;
      // overflow-x hidden
      // overflow-y auto
      .carefulSelectedBg{
        width 100px
        height 30px
      }
      .scrollRecom{
        display flex
        padding 0 15px
        width 167px
        .scrollRecomItem {
          margin-right 10px
          border 1px solid $color-border
          border-radius $border-radius-other
          margin-bottom 20px
          overflow hidden
          position relative
          .carefulSelectedThumbUrl {
            width 167px
            height 120px
          }
          .carefulSelectedThumbIcon {
            position absolute
            right 0px
            top 0px
            height 13px
            color $color-theme-5
            line-height: 13px;
            font-size: 12px;
            text-align center
            background rgba(0,0,0,0.5)
            padding 4px 6px
            margin 8px
            border-radius 3px
          }
          .carefulSelectedContent {
            width 160px
            .selectName {
              font-size $font-size-title
              color $color-text-1
              padding 2px 0 12px 12px
              display -webkit-box
              -webkit-box-orient vertical
              -webkit-line-clamp 2
              overflow hidden
              height 42px
            }
            .addressCartAll{
              font-size $font-size-desc
              color $color-text-3
              margin-bottom 10px
              display flex
              padding-left 12px
              width 97%
              img {
                width 8px
                height 10px
                margin 2px 4px 0 0
                display inline-block
              }
              .addressCart {
                width 130px
                overflow hidden
                text-overflow ellipsis
                white-space nowrap
              }
            }
            .priceCart {
              padding 0 12px 12px
              display flex
              justify-content space-between
              align-items flex-end
              .priceCartPrice {
                font-size $font-size-desc
                color $color-price
                display inline-block
                .priceCartText {
                  font-size $font-size-large
                  display inline-block
                }
              }
              .priceCartLevel {
                color $color-level
                font-size 13px
                padding-bottom 2px
              }
            }
          }
        }
      }
    }
    .productAll{
      padding 16px 15px 0 15px
      // background #fff
      .product-card {
        position relative
        border-radius: 5px;
        margin-bottom: 16px;
        overflow: hidden;
        background: #fff;
        // box-shadow: 0 0 6px 2px #999;
        .thumbUrl {
          .main {
            background-repeat: no-repeat;
            background-size: cover;
            height: 120px;
            color: #fff;
            position: relative;
            height 172px
            .mainImg {
              height 172px
            }
            .thumbIcon {
              float right
              height 13px
              color: $color-theme-4;
              line-height: 13px;
              font-size: 12px;
              text-align center
              background rgba(0,0,0,0.5)
              padding 4px 6px
              margin 8px
              border-radius 3px
            }
          }
          .price {
            width 72px
            color: $color-theme-4;
            line-height: 1.2;
            font-size: 12px;
            position absolute
            right 0px
            bottom 0px
            text-align right
            background rgba(0,0,0,0.5)
            padding 6px 10px 6px 0
            .priceNum {
              font-size $font-size-large
            }
          }
        }
        .bottom {
          .line {
            position relative
            margin: 5px 12px;
            .main-wrapper {
              .cartCommentIcon {
                display flex
                align-items center
                margin-top: 6px;
                .name {
                  font-size: 16px;
                  color $color-text-1
                  line-height:  1.5;
                  overflow : hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
              }
              .feature {
                font-size $font-size-desc
                color $color-text-3
                overflow : hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                line-height: 1.2;
                margin 4px 0
              }

              .level {
                display: flex;
                align-items: flex-end;
                img {
                  width: 32px;
                  height: 32px
                }
              }
            }

          }

          .addressW {
            font-size: $font-size-small;
            color: $color-text-3
            margin 0px 12px 12px
            .address {
              max-width: 72%;
              overflow : hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
    .map-module{
      background #fff
      position relative
      height 240px
      .carefulSelectedBg{
        width 100px
        height 30px
      }
      h4 {
        font-size $font-size-desc
        color $color-text-3
        z-index 2000
        position absolute
        top 2px
        left 10px
      }
      .wrapper {
        margin-left: 15px;
        margin-right: 15px;
        border-radius: 3px;
        border: 1px solid $color-border;
        box-shadow: 0 0 8px $color-border;
        overflow: hidden;
        .map {
          height: 188px;
          position: relative;
          margin-left: -1px;
          .curtain {
            width: 80%;
            height: 80%;
            position: absolute;
            top: 10%;
            left: 10%;
            background: rgba(255, 255, 255, 0.75);
            color: #333;
            display: flex;
            align-items: center;
            border-radius: 5px;
          }
        }
        .list {
          background: #fff;
          list-style: none;
          padding: 5px 12px;
          li {
            float: left;
            margin-right: 12px;
            line-height: 21px;
            img {
              width: 21px;
              height: 21px;
              min-width: 21px;
            }
            span {
              font-size: $font-size-desc;
              color: $color-text-2;
              line-height: 1;
              display: inline-block;
              transform: translateY(-4px);
            }
          }
          &:after {
            content: '';
            display: block;
            clear: both;
          }
        }
      }
    }
  }
  .fontWei {
    font-weight bold
  }
  .cartEntrance{
    // height 110px
    display flex
    // justify-content space-around
    flex-wrap wrap
    padding 16px 0 0
    // border-bottom 1px solid rgba(0,0,0,0.1)
    background #fff
    .cartEntranceItem{
      display flex
      flex-direction column
      align-items center
      width 25%
      margin 0 0 16px
      img {
        width 44px
        height 44px
        margin-bottom 2px
      }
    }
  }
  .cartInnerHeight {
    height 100%
    -webkit-overflow-scrolling: touch;
    overflow-x hidden
    overflow-y auto
  }
  .horizontal-scroll {
    overflow unset
  }
</style>

<style lang='stylus'>
  .cartComment .Vheader .header-wrapper .header{
    padding-left 20px
    padding-right 20px
    padding-bottom 10px
  }
  .cartComment .Vheader .header .left {
    display none
  }

  .vuxTab  .vux-tab .vux-tab-item {
    line-height 44px
  }

  .vuxTab .vux-tab-warp .vux-tab-container {
    height: 44px;
  }

  .cartCommentIcon .cartCommentIconRater .vux-rater .vux-rater-box {
    margin-right 1px !important
  }
</style>
